<template>
    <div class="pagination">

        <div class="pageBtn firstPage" :class="currentPage > 1 ? 'backg' : ''" @click="gotoPage(1)">
            <!-- <img class="btnIcon " src="@/assets/images/images_new/firstPage.png" alt=""> -->
            首页
        </div>
        <el-config-provider :locale="locale">
            <el-pagination background :layout="layout" :page-size="pageSize" :total="pageTotal"
                v-model:currentPage="currentPages" :pager-count="5" prev-text="上一页" next-text="下一页"
                @size-change="sizeChange" @current-change="current" @prev-click="prev"
                @next-click="next"></el-pagination>
        </el-config-provider>

        <div class="pageBtn lastPage" :class="currentPage > 1 ? 'backg' : ''" @click="gotoPage(1)">
            <!-- <img class="btnIcon " src="@/assets/images/images_new/firstPage.png" alt=""> -->
            尾页
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
let locale = zhCn
locale.el.pagination = {
    goto: '跳至',
    pagesize: '',
    total: '共 {total}条',
    pageClassifier: '页',
    page: '页',
    prev: '上一页',
    next: '下一页',
    currentPage: '',
    prevPages: '',
    nextPages: '',
    deprecationWarning: '',
}
const props = defineProps({
    pageTotal: {
        type: Number,
        default: 0, //总页数
    },
    layout: {
        type: String,
        default: "prev, pager, next" //分页组件会展示的功能项
    },
    currentPage: {
        type: Number,
        default: 1, //指定跳转到多少页
    },
    pageSize: {
        type: Number,
        default: 10, //每页展示的条数，根据自己实际，且会带入请求
    },
    pageNum: {
        type: Number,
        default: 1, //第几页数据，根据自己实际，且会带入请求
    },
});

let currentPages = ref(props.currentPage);
let pageData = reactive({
    pageSize: props.pageSize,
    pageNum: props.pageNum,
});

const emit = defineEmits(["pageFunc"]);

//选择每页显示数量 Change page size
const sizeChange = (val: number) => {
    pageData.pageSize = val;
    emit("pageFunc", pageData);
};
//选择某一页
const current = (val: number) => {
    pageData.pageNum = currentPages.value;
    emit("pageFunc", pageData);
};
//上一页
const prev = () => {
    pageData.pageNum = pageData.pageNum - 1;
    emit("pageFunc", pageData);
};
//下一页
const next = () => {
    pageData.pageNum = pageData.pageNum + 1;
    emit("pageFunc", pageData);
};
//跳转到某一页
const gotoPage = (page: number) => {
    // console.log('pageNum', page);
    if (page >= 1 && page <= props.pageTotal && props.pageNum != page) {
        let pageNew = page;
        emit("pageFunc", pageNew);
    }
}
</script>

<style scoped lang="scss">
.pagination {
    width: 100%;
    height: 25px;
    margin: 0 auto;

    display: flex;
    justify-content: flex-end;
    .el-pagination {
        float: right;
    }
    
    .pageBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 66px;
        line-height: 24px;
        background: rgba(0, 192, 255, 0.2);
        // border: 1px solid #00C0FF;

        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        &.firstPage {
            margin-right: 10px;
        }
        &.lastPage {
            margin-left: 10px;
        }
    }
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: rgba(0, 192, 255, 0.5) !important; //修改默认的背景色
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 1);
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled)) {
    background-color: rgba(0, 192, 255, 0.2) !important; //修改默认的背景色
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 1);
    width: 35px;
    height: 25px;
    line-height: 25px;
}

:deep(.el-pagination.is-background .btn-prev) {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 1);
    width: 75px;
    height: 25px;
    line-height: 25px;
    background-color: rgba(0, 192, 255, 0.2)
}

:deep(.el-pagination.is-background .btn-next) {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 1);
    width: 75px;
    height: 25px;
    line-height: 25px;
    background-color: rgba(0, 192, 255, 0.2)
}

:deep(.el-pagination.is-background .el-input) {
    width: 80px;
    height: 25px;
}

:deep(.el-pagination.is-background .el-input__wrapper) {
    padding: 0;
    box-shadow: none;
}

:deep(.el-pagination.is-background .el-input__inner) {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 1);
    height: 25px;
    line-height: 25px;
    background: rgba(192, 164, 91, 0.2);
}

:deep(.el-pagination__total) {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
}

:deep(.el-pagination__jump.is-last) {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
}
</style>